<template>
	<div>
		<Form label-position="top">
	        <FormItem label="间距设置">
	        	<div class="ui-slider-group">
	        		<div class="label">顶部外边距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.margin"></Slider>
	        		</div>
	        	</div>
	        	<div class="ui-slider-group">
	        		<div class="label">上下间距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.paddingy"></Slider>
	        		</div>
	        	</div>
	        	<div class="ui-slider-group">
	        		<div class="label">左右间距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.paddingx"></Slider>
	        		</div>
	        	</div>
	        </FormItem>
	        <FormItem label="销量显示">
	            <RadioGroup v-model="value.showNumber">
			        <Radio :label="0">隐藏销量</Radio>
			        <Radio :label="1">显示销量</Radio>
			    </RadioGroup>
	        </FormItem>
	        <FormItem label="价格颜色">
	            <ColorPicker  v-model="value.priceColor"></ColorPicker>
	            <span style="margin-left: 10px; color: #999;">请选择价格文字颜色</span>
	        </FormItem>
	        <FormItem label="产品角标">
	            <RadioGroup v-model="value.showSub">
			        <Radio :label="0">不显示</Radio>
			        <Radio :label="1">系统角标</Radio>
			    </RadioGroup>
	        </FormItem>
	        <div v-show="value.showSub">
	        	<FormItem label="角标颜色">
		            <ColorPicker  v-model="value.subBgColor"></ColorPicker>
		            <span style="margin-left: 10px; color: #999;">请选择角标背景颜色</span>
		        </FormItem>
		        <FormItem label="角标文字颜色">
		            <ColorPicker  v-model="value.subTextColor"></ColorPicker>
		            <span style="margin-left: 10px; color: #999;">请选择角标文字颜色</span>
		        </FormItem>
		        <FormItem label="角标样式">
		            <RadioGroup v-model="value.subStyle">
				        <Radio :label="0">样式①</Radio>
				        <Radio :label="1">样式②</Radio>
				        <Radio :label="2">样式③</Radio>
				        <Radio :label="3">样式④</Radio>
				    </RadioGroup>
		        </FormItem>
		        <FormItem label="角标文案">
		            <RadioGroup v-model="value.subText">
				        <Radio :label="0">促销</Radio>
				        <Radio :label="1">推荐</Radio>
				        <Radio :label="2">新上</Radio>
				        <Radio :label="3">热销</Radio>
				        <Radio :label="4">自定义</Radio>
				    </RadioGroup>
		        </FormItem>
		        <FormItem label="自定义内容" v-show="value.subText == 4">
		            <Input v-model="value.subTextCustom" :maxlength="2" placeholder="请输入自定义内容，最多两个字"></Input>
		        </FormItem>
	        </div>
	    </Form>
        <div class="ui-picture-cell">
			<div class="config">
				<Form :label-width="60">
					<FormItem label="显示数量">
			            <Input v-model="value.number" number :maxlength="2"></Input>
			        </FormItem>
			        <FormItem label="商品来源">
			            <Input v-model="value.source">
			            	<Button slot="append">选择链接</Button>
			            </Input>
			        </FormItem>
				</Form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'productConfig',
	props: {
		value: Object
	}
}
</script>

<style>
</style>